<template>
	<!-- 会员俱乐部 -->
	<view class="member-club">
		<!-- 用户信息 -->
		<user-info :showMiddle="false"></user-info>
		<view class="list">
			<text>我要赚取积分</text>
			<view class="iconfont icon-you-jiantou"></view>
		</view>
		<view class="add-integral">
			<view class="item">
				<view class="iconfont icon-zhuce"></view>
				<text class="name">会员注册</text>
				<text class="num">+10</text>
			</view>
			<view class="item">
				<view class="iconfont icon-denglu"></view>
				<text class="name">会员登录</text>
				<text class="num">+2</text>
			</view>
			<view class="item">
				<view class="iconfont icon-touxiang"></view>
				<text class="name">上传头像</text>
				<text class="num">+2</text>
			</view>
		</view>
		<view class="list">
			<text>超值兑换</text>
			<view class="iconfont icon-you-jiantou"></view>
		</view>
		<view class="other-integral">
			<view class="draw">积分抽奖</view>
			<view class="grade">积分等级</view>
			<view @click="goEarnPoints" class="earn">赚取积分</view>
		</view>
	</view>
</template>

<script>
	import userInfo from "../../components/user-info.vue"
	export default {
		data() {
			return {
				
			}
		},
		components: {
			userInfo
		},
		methods: {
			goEarnPoints() {
				uni.navigateTo({
					url: "/pages/earn-points/earn-points"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
		.member-club {
			.list {
				background-color: #FFFFFF;
				margin: rpx($uni-margin-top) rpx($uni-margin-left);
				border: 1px solid #ddd;
				display: flex;
				justify-content: space-between;
				height: rpx(50);
				line-height: rpx(50);
				padding: 0 rpx(17);
				text {
					font-size: rpx(16);
				}
				view {
					color: #eee;
					font-size: rpx(26);
				}
			}
			.add-integral {
				display: flex;
				padding: rpx($uni-margin-left);
				.item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					view {
						font-size: rpx(40);
						color: #4bdac3;
					}
					.name {
						font-size: rpx(16);
						margin: rpx(8) 0 rpx(5);
					}
					.num {
						color: red;
						font-size: rpx(14);
					}
				}
			}
			.other-integral {
				display: flex;
				height: rpx(80);
				margin: 0 rpx($uni-margin-left);
				line-height: rpx(80);
				text-align: center;
				color: #fff;
				font-size: rpx(20);
				view {
					flex: 1;
					border-radius: rpx(4);
					&:not(:last-child) {
						margin-right: rpx(11);
					}
				}
				.draw {
					background-color: #fd5e5e;
				}
				.grade {
					background-color: #357fe1;
				}
				.earn {
					background-color: #18b5b5;
				}
			}
		}
	}
</style>
